<ons-page id="splitterPage">
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Splitter 侧边栏</div>
    </ons-toolbar>

    <ons-splitter id="mySplitter">
        <!-- 侧边栏 -->
        <ons-splitter-side id="splitterMenu" side="left" width="250px" collapse swipeable>
            <ons-page>
                <div style="padding: 20px; background-color: #f5f5f5; height: 100%;">
                    <div style="text-align: center; padding: 20px 0;">
                        <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
                            <ons-icon icon="md-account-circle" style="color: white; font-size: 48px;"></ons-icon>
                        </div>
                        <h3 style="margin-top: 15px;">用户名称</h3>
                        <p style="color: #666; font-size: 14px;">user@example.com</p>
                    </div>

                    <ons-list style="margin-top: 20px;">
                        <ons-list-item tappable onclick="selectMenuItem('首页')">
                            <div class="left">
                                <ons-icon icon="md-home"></ons-icon>
                            </div>
                            <div class="center">首页</div>
                        </ons-list-item>
                        <ons-list-item tappable onclick="selectMenuItem('消息')">
                            <div class="left">
                                <ons-icon icon="md-email"></ons-icon>
                            </div>
                            <div class="center">消息</div>
                            <div class="right">
                                <span style="background-color: #ff6b6b; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px;">3</span>
                            </div>
                        </ons-list-item>
                        <ons-list-item tappable onclick="selectMenuItem('收藏')">
                            <div class="left">
                                <ons-icon icon="md-favorite"></ons-icon>
                            </div>
                            <div class="center">收藏</div>
                        </ons-list-item>
                        <ons-list-item tappable onclick="selectMenuItem('设置')">
                            <div class="left">
                                <ons-icon icon="md-settings"></ons-icon>
                            </div>
                            <div class="center">设置</div>
                        </ons-list-item>
                    </ons-list>

                    <div style="position: absolute; bottom: 20px; left: 20px; right: 20px;">
                        <ons-button modifier="large--quiet" onclick="logout()">
                            <ons-icon icon="md-power-settings-new"></ons-icon> 退出登录
                        </ons-button>
                    </div>
                </div>
            </ons-page>
        </ons-splitter-side>

        <!-- 主内容区 -->
        <ons-splitter-content id="splitterContent">
            <ons-page>
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button onclick="toggleMenu()">
                            <ons-icon icon="md-menu"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center" id="pageTitle">主页面</div>
                </ons-toolbar>

                <div style="padding: 20px;">
                    <h3>侧边栏导航示例</h3>
                    <div class="code-example-container">
                        <div class="code-demo-area">
                            <p style="color: #666; line-height: 1.6;">
                                点击左上角的菜单按钮或从左侧边缘向右滑动可以打开侧边栏。
                            </p>
                            <ons-card style="margin-top: 20px;">
                                <div class="title">功能说明</div>
                                <div class="content">
                                    <p style="margin: 5px 0;">• 点击菜单按钮打开/关闭侧边栏</p>
                                    <p style="margin: 5px 0;">• 从左边缘向右滑动打开侧边栏</p>
                                    <p style="margin: 5px 0;">• 点击遮罩层关闭侧边栏</p>
                                    <p style="margin: 5px 0;">• 选择菜单项后自动关闭</p>
                                </div>
                            </ons-card>
                        </div>
                        <div class="code-actions" onclick="toggleCode('splitter-code')">
                            <div class="code-actions-left">
                                <ons-icon id="icon-splitter-code" icon="md-chevron-down"></ons-icon>
                                <span>查看代码</span>
                            </div>
                            <div class="code-actions-right">
                                <button class="code-action-btn" id="copy-btn-splitter-code" onclick="event.stopPropagation(); copyCode('splitter-code')">
                                    <ons-icon icon="md-copy"></ons-icon>
                                    <span class="btn-text">复制</span>
                                </button>
                            </div>
                        </div>
                        <div class="code-display" id="code-splitter-code">
                            <pre><code id="code-content-splitter-code">&lt;!-- HTML --&gt;
&lt;ons-splitter id="mySplitter"&gt;
    &lt;!-- 侧边栏 --&gt;
    &lt;ons-splitter-side id="splitterMenu" side="left" width="250px" collapse swipeable&gt;
        &lt;ons-page&gt;
            &lt;!-- 侧边栏内容 --&gt;
            &lt;ons-list&gt;
                &lt;ons-list-item tappable onclick="selectMenuItem('首页')"&gt;
                    &lt;div class="left"&gt;
                        &lt;ons-icon icon="md-home"&gt;&lt;/ons-icon&gt;
                    &lt;/div&gt;
                    &lt;div class="center"&gt;首页&lt;/div&gt;
                &lt;/ons-list-item&gt;
                &lt;!-- 更多菜单项... --&gt;
            &lt;/ons-list&gt;
        &lt;/ons-page&gt;
    &lt;/ons-splitter-side&gt;

    &lt;!-- 主内容区 --&gt;
    &lt;ons-splitter-content id="splitterContent"&gt;
        &lt;ons-page&gt;
            &lt;ons-toolbar&gt;
                &lt;div class="left"&gt;
                    &lt;ons-toolbar-button onclick="toggleMenu()"&gt;
                        &lt;ons-icon icon="md-menu"&gt;&lt;/ons-icon&gt;
                    &lt;/ons-toolbar-button&gt;
                &lt;/div&gt;
                &lt;div class="center"&gt;主页面&lt;/div&gt;
            &lt;/ons-toolbar&gt;
            &lt;!-- 主内容 --&gt;
        &lt;/ons-page&gt;
    &lt;/ons-splitter-content&gt;
&lt;/ons-splitter&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function toggleMenu() {
    var menu = document.getElementById('splitterMenu');
    if (menu) {
        menu.toggle();
    }
}

function selectMenuItem(item) {
    var menu = document.getElementById('splitterMenu');
    // 更新内容
    console.log('选择了: ' + item);
    // 关闭菜单
    if (menu) {
        menu.close();
    }
}
&lt;/script&gt;</code></pre>
                        </div>
                    </div>

                    <h3 style="margin-top: 30px;">操作按钮</h3>
                    <div class="code-example-container">
                        <div class="code-demo-area">
                            <p style="margin: 10px 0;">
                                <ons-button onclick="toggleMenu()">
                                    <ons-icon icon="md-menu"></ons-icon> 打开菜单
                                </ons-button>
                            </p>
                        </div>
                        <div class="code-actions" onclick="toggleCode('toggle-menu-code')">
                            <div class="code-actions-left">
                                <ons-icon id="icon-toggle-menu-code" icon="md-chevron-down"></ons-icon>
                                <span>查看代码</span>
                            </div>
                            <div class="code-actions-right">
                                <button class="code-action-btn" id="copy-btn-toggle-menu-code" onclick="event.stopPropagation(); copyCode('toggle-menu-code')">
                                    <ons-icon icon="md-copy"></ons-icon>
                                    <span class="btn-text">复制</span>
                                </button>
                            </div>
                        </div>
                        <div class="code-display" id="code-toggle-menu-code">
                            <pre><code id="code-content-toggle-menu-code">&lt;!-- HTML --&gt;
&lt;ons-button onclick="toggleMenu()"&gt;
    &lt;ons-icon icon="md-menu"&gt;&lt;/ons-icon&gt; 打开菜单
&lt;/ons-button&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function toggleMenu() {
    var menu = document.getElementById('splitterMenu');
    if (menu) {
        menu.toggle();
    }
}
&lt;/script&gt;</code></pre>
                        </div>
                    </div>

                    <h3 style="margin-top: 30px;">当前选择</h3>
                    <ons-card>
                        <div class="content">
                            <p style="font-size: 18px; text-align: center; padding: 20px;">
                                <ons-icon icon="md-info" style="color: #4a90e2; font-size: 48px;"></ons-icon>
                            </p>
                            <p style="text-align: center; color: #666;" id="selectedItem">
                                请从侧边栏选择一个菜单项
                            </p>
                        </div>
                    </ons-card>

                    <div style="margin-top: 30px; padding: 20px; background-color: #f5f5f5; border-radius: 8px;">
                        <h4>提示</h4>
                        <p style="color: #666; line-height: 1.6;">
                            Splitter 组件非常适合用于创建应用的主导航结构，特别是在平板电脑和桌面设备上。
                        </p>
                    </div>
                </div>
            </ons-page>
        </ons-splitter-content>
    </ons-splitter>

    <script>
        // 等待页面初始化
        document.addEventListener('init', function(event) {
            if (event.target.matches('#splitterPage')) {
                console.log('Splitter page initialized');
            }
        });

        function toggleMenu() {
            var menu = document.getElementById('splitterMenu');
            if (menu) {
                menu.toggle();
            }
        }

        function selectMenuItem(item) {
            var menu = document.getElementById('splitterMenu');
            var title = document.getElementById('pageTitle');
            var selectedItem = document.getElementById('selectedItem');
            
            // 更新标题和内容
            if (title) {
                title.textContent = item;
            }
            if (selectedItem) {
                selectedItem.textContent = '当前选择: ' + item;
            }
            
            // 关闭菜单
            if (menu) {
                menu.close();
            }
        }

        function logout() {
            ons.notification.confirm({
                message: '确定要退出登录吗？',
                title: '退出',
                buttonLabels: ['取消', '确定'],
                callback: function(index) {
                    if (index === 1) {
                        var menu = document.getElementById('splitterMenu');
                        if (menu) {
                            menu.close();
                        }
                    }
                }
            });
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
